<template>
    <div>
        <div>
            <el-row :gutter="20">
                <el-col :span="4" :offset="0">
                    <el-card class="box-card"
                        style="background-color:white;border: 1px solid black;height: 800px;width: 240px;">
                        <el-select placeholder="我的方案" style="width: 140px" clearable>
                            <el-option label="下级方案" value="下级方案" />
                        </el-select>
                        <br /> <br />
                        <el-select placeholder="网格区域树" style="width: 140px" clearable>
                            <el-option label="网格区域树" value="网格区域树" />
                        </el-select>
                        <br />
                        <br />
                    </el-card>
                </el-col>
                <el-col :span="20" :offset="0">
                    <el-card class="box-card"
                        style="background-color:white;border: 1px solid black;height: 100px;width: 1200px;">
                        <el-form :inline="true" :model="serchData" class="demo-form-inline">
                            <el-form-item label="网格名称">
                                <el-input placeholder="请输入" clearable style="width: 200px;" />
                            </el-form-item>
                            <el-form-item label="网格长">
                                <el-input placeholder="请输入" clearable style="width: 200px;" />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="success">搜索</el-button>
                            </el-form-item>
                        </el-form>
                    </el-card>
                    <br /><br />
                    <el-table border :data="assessmentSchemeList" style="width: 100%">
                        <el-table-column type="index" label="序号" width="60" align="center" :index="indexMethod" />
                        <el-table-column prop="gridName" label="网格名称" align="center" />
                        <el-table-column prop="meshLength" label="网格长" align="center" />
                        <el-table-column prop="time" label="时间" align="center">
                            <template v-slot="spoce">
                                {{ spoce.row.time.substring(0, 4) }}年{{ spoce.row.time.substring(5, 7) }}月
                            </template>
                        </el-table-column>
                        <el-table-column prop="objectiveScoring" label="客观评分" align="center">
                            <template v-slot="spoce">
                            </template>
                        </el-table-column>
                        <el-table-column prop="subjectiveRating" label="主观评分" align="center">
                            <template v-slot="spoce">
                            </template>
                        </el-table-column>
                        <el-table-column label="综合评分" align="center">
                            <template v-slot="spoce">
                                {{ 100 }}
                            </template>
                        </el-table-column>
                        <el-table-column label="评价等级" align="center">
                            <template v-slot="spoce">
                                A
                            </template>
                        </el-table-column>
                    </el-table>

                    <!-- 分页 -->
                    <table style="margin: 5px auto;">
                        <tbody>
                            <tr>
                                <td>
                                    <el-pagination v-model:current-page="page.pageIndex"
                                        v-model:page-size="page.pageSize" :page-sizes="[15, 20, 25, 30]" background
                                        layout="slot" :total="page.totalCount" @size-change="handleSizeChange"
                                        @current-change="handleCurrentChange" prev-text="上一页" next-text="下一页">
                                        <span>
                                            共 {{ page.totalCount }} 条，共 {{ page.pageCount }} 页，当前 {{ page.pageIndex }} /
                                            {{
                                                page.pageCount
                                            }} 页
                                        </span>
                                    </el-pagination>
                                </td>
                                <td>
                                    <el-pagination v-model:current-page="page.pageIndex"
                                        v-model:page-size="page.pageSize" :page-sizes="[15, 20, 25, 30]" background
                                        layout="sizes, slot,prev, pager, next" :total="page.totalCount"
                                        @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                        prev-text="上一页" next-text="下一页">
                                        <span>
                                            <button @click="handleCurrentChange(1)"
                                                :disabled="page.pageIndex == 1">首页</button>
                                        </span>
                                    </el-pagination>
                                </td>
                                <td>
                                    <el-pagination v-model:current-page="page.pageIndex"
                                        v-model:page-size="page.pageSize" :page-sizes="[15, 20, 25, 30]" background
                                        layout="slot,jumper" :total="page.totalCount" @size-change="handleSizeChange"
                                        @current-change="handleCurrentChange" prev-text="上一页" next-text="下一页">
                                        <span>
                                            <button @click="handleCurrentChange(page.pageCount)"
                                                :disabled="page.pageIndex == page.pageCount">尾页</button>
                                        </span>
                                    </el-pagination>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, inject } from 'vue'
import { ElMessage, ElMessageBox, ElTree } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import type { AxiosStatic } from "axios"
import { useRouter } from 'vue-router'
const axios = inject('axios') as AxiosStatic

//方案管理查询条件
const serchData = reactive({
    assessmentType: "",
    schemeName: "",
    assessmentObject: "",
})

//方案管理分页数据
const page = reactive({
    pageIndex: 1,
    pageSize: 15,
    totalCount: 0,
    pageCount: 0,
})

const handleSizeChange = (val: number) => {
    page.pageIndex = 1
    page.pageSize = val

}

const handleCurrentChange = (val: number) => {
    page.pageIndex = val

}

//考核方案数据显示
const assessmentSchemeList = ref([])
const getAssessmentSchemeList = () => {
    axios.get('http://47.95.178.186:8000/ExamineGetRout/api/AssessmentSchemeRead/GetEvaluateResultQuery', {
        params: {
            pageIndex: page.pageIndex,
            pageSize: page.pageSize,
        }
    }).then(res => {
        if (res.data.code == 200) {
            assessmentSchemeList.value = res.data.result.data
            page.totalCount = res.data.result.totalCount
            page.pageCount = res.data.result.pageCount
        }
    })
}

//序号
const indexMethod = (index: number) => {
    return index += (page.pageSize) * (page.pageIndex - 1) + 1;
}

onMounted(() => {
    getAssessmentSchemeList()
})
</script>

<style></style>